<template>
    <div class="box" style="width: 870px;
        height: 100%;
       ">
        <span class="span_int">风险性分级</span>
        <div class="left" style=" 
        width: 330px;
        height: 165px;
        float: left;
        position: relative;
        left:35%;
        background-repeat: no-repeat;
        background-size: 100% 100%;">
        <span class="span_a"></span>
        <span class="span_b"></span>
        <span class="span_c"></span>
        <span class="span_d"></span>
            <div class="bg" style=" width: 0;
        height: 116px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;"></div>
            <i class="progressbar" id="progressbar" style="  width: 24px;
        height: 116px;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 110px;
        left: 150px;
        cursor: move;"></i>
        </div>
    </div>
</template>
<script>
export default {
    props: ['xdModel','xdScale'],
    data() {
        return {
            model: 20,
            scale: [0,20,70,160,200]
        }
    },
    created() {
        this.model = this.xdModel
        this.scale = this.xdScale
    },
    mounted() {
        this.adjust()
    },
    methods: {
        adjust() {
            let progressbar = document.getElementById("progressbar")
            progressbar.style.transform = "rotate("+this.getAngle+"deg)";
        }
    },
    watch: {
        "xdModel": function() {
            this.model = this.xdModel
            this.scale = this.xdScale
            let progressbar = document.getElementById("progressbar")
            progressbar.style.transform = "rotate("+this.getAngle+"deg)";
        },
        "xdScale": function() {
            this.model = this.xdModel
            this.scale = this.xdScale
            let progressbar = document.getElementById("progressbar")
            progressbar.style.transform = "rotate("+this.getAngle+"deg)";
        }
    },
    computed: {
        getAngle: function () {
            let oneAngle = 180 / (this.scale.length - 1)
            if(this.model < this.scale[0]) {
                return 0 - 90
            } else if (this.model > this.scale[this.scale.length-1]) {
                return 180 - 90
            }else {
                for (let i = 0; i < (this.scale.length - 1); i++) {
                    let j = i + 1
                    if (this.model >= this.scale[i] && this.model <= this.scale[j]) {
                        return (this.model-this.scale[i])/(this.scale[j] - this.scale[i]) * oneAngle + i * oneAngle - 90
                    }
                }
            }
            return 0
        }
    }
}
</script>
<style lang="scss">
.box{
    position: relative;
    display: flex;
    padding-top: 70px;
    .span_int{
        position: absolute;
        top: -20px;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #0882A5;
    }
      span{
            display: inline-block;
        }
        .span_a{
            position: absolute;
            left: -430px;
            top: 100px;
        width: 350px;
        height: 40px;
        background: url("https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/qin_w.png") no-repeat;
        background-size: 100% 40px;
        &::before{
            position: absolute;
            content: '';
            display: block;
            width: 77px;
            height: 11px;
            background: url("https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/xian_1.png") no-repeat;
            background-size: 100% 100%;
            right: -80px;
            top: 33%;
        }
        }
         .span_b{
              position: absolute;
            left: -440px;
            top: -20px;
        width: 350px;
        height: 40px;
        background: url("https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/yi_ban.png") no-repeat;
        background-size: 100% 40px;
         &::before{
            position: absolute;
            content: '';
            display: block;
            width: 138px;
            height: 21px;
            background: url("https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/xian_2.png") no-repeat;
            background-size: 100% 100%;
            right: -138px;
            top: 33%;
        }
        }
         .span_c{
                position: absolute;
            right: -380px;
            top: -20px;
        width: 350px;
        height: 40px;
        background: url("https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/jiao_d.png") no-repeat;
        background-size: 100% 40px;
        &::before{
            position: absolute;
            content: '';
            display: block;
            width: 63px;
            height: 18px;
            background: url("https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/xian_3.png") no-repeat;
            background-size: 100% 100%;
            left:-80px;
            top: 33%;
        }
        }
         .span_d{
               position: absolute;
           right: -330px;
            top: 250px;
        width: 350px;
        height: 40px;
        background: url("https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/zhon_d.png") no-repeat;
        background-size: 100% 40px;
        &::before{
            position: absolute;
            content: '';
            display: block;
            width: 11px;
            height: 64px;
            background: url("https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/xian_4.png") no-repeat;
            background-size: 100% 100%;
            left:-20px;
            top: -97%;
        }
        }
    .left{
        background-image: url('https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/D.png');
        .progressbar{
            background-image: url('https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/jian_t.png');
            transform: rotate(45deg);
        }
    }
}
</style>